import React from 'react';
import { Grid } from 'antd-mobile';
import propTypes from 'prop-types';

import './style.css';

// 头像图片数据
const avatarData = ['boy','bull','chick','crab','girl','hedgehog','hippopotamus','tiger','pig','man','lemur','koala','whale','woman','zebra'];
const avatarList = avatarData.map((val) => ({
    icon:require(`../img/${val}.png`),
    text:val
}));

class avatarChoose extends React.Component {
    static propTypes={
        avatarChooseName:propTypes.func.isRequired
    };
    render() {
        // console.log(this.props.avatarText);
        return (
            <div>
                {this.props.avatarText?<Grid columnNum={3} data={[{icon:require(`../img/${this.props.avatarText}.png`),text:this.props.avatarText}]} activeStyle={false} hasLine={false} />:null}
                <div className="sub-title">请选择你的头像 </div>
                <Grid data={avatarList} activeStyle={false} onClick={(e) => this.props.avatarChooseName(e)} />
            </div>
        );
    }
}

export default avatarChoose;